<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sub.css" />
		<link rel="stylesheet" type="text/css" href="css/detail.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
	   <header class="mui-bar mui-bar-nav">
	       <a class="mui-action-back mui-pull-left"><i class="icon">返回</i></a>
	       <h1 class="detail-tit mui-ellipsis mui-pull-left">婚礼主题名字(婚礼策划案例详情)</h1>
	       <a href="" class="mui-pull-right"><i class="icon">客服</i></a>
	       <a href="" class="mui-pull-right"><i class="icon">分享</i></a>
	   </header>
		<div class="mui-content">
			<!--S轮播图-->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" id="sliderwrap">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
				</div>
			</div>
			<!--E轮播图-->
			
			<!--S头部信息-->
			<div class="detail-header wed-header">
				<h1 class="mod-title-30">婚礼主题名字</h1>
				<div class="mt12">
					<span class="mod-price">&yen;&nbsp;4999</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="mod-detail-24">销量:&nbsp;&nbsp;21</span>
				</div>
				<p class="mod-detail-22 lh36"><i class="icon mr6">图标</i>喜来登大酒店</p>
				<p class="mod-detail-22">商家：Shllife摄影</p>
				<p class="mod-detail-22 lh36">客户评星:&nbsp;&nbsp;<i class="icon">图标</i></p>
			</div>
			<!--E头部信息-->
			
			<!--详情选择部分-->
			<div class="detail-select">
				<ul>
					<li class="active" data-js="zpxsJs">照片欣赏</li>
					<li data-js="albhJs">案例包含</li>
					<li data-js="gkpjJs">顾客评价</li>
				</ul>
			</div>
			<!--详情选择部分-->
			
			<!--内容详情部分-->
			<div class="detail-content" id="conWrap">
				<div class="show-img">
					<img src="http://placehold.it/400x240"/>
					<img src="http://placehold.it/400x240"/>
					<img src="http://placehold.it/400x240"/>
				</div>
			</div>
			<!--内容详情部分-->
		</div>
		<!--脚部-->
		<nav class="mui-bar mui-bar-tab">
			<!--<a class="mui-tab-item mui-active" href="index.html" data-id="index">
				<span class="mui-icon index"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="discover.html" data-id="discover">
				<span class="mui-icon discover"></span>
				<span class="mui-tab-label">发现</s pan>
			</a>
			<a class="mui-tab-item" href="newsay.html" data-id="newsay">
				<span class="mui-icon newsay"></span>
				<span class="mui-tab-label">新人说</span>
			</a>
			<a class="mui-tab-item" href="shop.html" data-id="shop">
				<span class="mui-icon shop"></span>
				<span class="mui-tab-label">商城</span>
			</a>
			<a class="mui-tab-item" href="myshemher.html" data-id="myshemher">
				<span class="mui-icon myshemher"></span>
				<span class="mui-tab-label">我的</span>
			</a>-->
		</nav>
		
		<script type="text/html" id="sliderJs">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="{{carousel[length].img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
			{{each carousel as item index }}
			<div class="mui-slider-item">
				<a href="#">
					<img src="{{item.img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
			{{/each }}
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="{{carousel[0].img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
		</script>
		
		<!--照片欣赏-->
		<script type="text/html" id="zpxsJs">
			<div class="show-img">
				{{ each arr as item index }}
				<img src="http://placehold.it/400x240"/>
				{{/each}}
			</div>
		</script>
		
		<!--案例包含-->
		<script type="text/html" id="albhJs">
			
			<div class="case-wrap">
				{{ each arr as item index }}
					<div class="case">
						<div class="case-header">
							<h1 class="mod-title-22">造型</h1>
						</div>
						<div class="case-body mt12">
							{{each arr as item index}}
							<div class="case-item mui-clearfix">
								<p class="case-item-tit mui-pull-left">[ 新娘服装 ]</p>
								<p class="case-item-con mui-pull-right">提供新提供新提供新提供新提供新郎拍摄西摄西装提供新郎拍摄西装</p>
							</div>
							{{/each}}
						</div>
						
					</div>
				{{/each}}
			</div>
			
		</script>
		
		<!--顾客评价-->
		<script type="text/html" id="gkpjJs">
			<div class="comment-wrap">
				{{ each arr as item index }}
				<div class="comment">
					<div class="comment-header mui-clearfix">
						<div class="comment-header-img mui-pull-left">
							<img src="http://placehold.it/99x99"/>
						</div>
						<div class="comment-header-con mui-pull-left">
							<h1 class="mod-title-24 mui-ellipsis">用户名</h1>
							<i class="icon">图标</i>
							<p class="mod-info-20 mui-ellipsis"> 2017-06-31</p>
						</div>
					</div>
					<div class="comment-body">
						<p class="mod-info-20 mui-ellipsis-2">评价内容评价评价内容评评价内容评内容评价内容评价内容评价内容评价内容评价内容评价内容，评价内容评价内容评价内容评价内容评价内容评价内容 评价内容评价内容评价内容。评价内容显示两排</p>
						<div class="comment-body-imgs">
							<img src="http://placehold.it/150x150"/>
							<img src="http://placehold.it/150x150"/>
							<img src="http://placehold.it/150x150"/>
						</div>
					</div>
				</div>
				{{/each}}
			</div>
		</script>

		<script src="js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/detail.js" type="text/javascript" charset="utf-8"></script>
		
	</body>

</html>